<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>暗黑模式切换</title>
    <style>
        /* 🎨 定义默认（亮色）主题 */
        @media (prefers-color-scheme: light) {
            :root {
                --primary-color: #5b88bd;  /* 明亮主题色 */
                --text-color: #000;        /* 明亮主题文本颜色 */
                --bg-color: #fff;          /* 明亮主题背景颜色 */
            }
        }
        /* 🎨 定义默认（亮色）主题 */
        @media (prefers-color-scheme: dark) {
            :root {
                --primary-color: #1e2a34; /* 暗黑主题色 */
                --text-color: #ccc; /* 暗黑主题文本颜色 */
                --bg-color: #121212; /* 暗黑模式背景 */
            }
        }

        /* 🌙 定义暗黑模式 */
        /*[data-theme="dark"] {*/
        /*    --primary-color: #1e2a34;  !* 暗黑主题色 *!*/
        /*    --text-color: #ccc;        !* 暗黑主题文本颜色 *!*/
        /*    --bg-color: #121212;       !* 暗黑模式背景 *!*/
        /*}*/
        /*!* 🌙 定义暗黑模式 *!*/
        /*[data-theme="red"] {*/
        /*    --primary-color: yellow;  !* 暗黑主题色 *!*/
        /*    --text-color: red;        !* 暗黑主题文本颜色 *!*/
        /*    --bg-color: #121212;       !* 暗黑模式背景 *!*/
        /*}*/

        /* 🎨 应用 CSS 变量 */
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
            transition: all 0.3s ease-in-out;
        }

        h1 {
            color: var(--primary-color);
        }

        /* 🌙 切换按钮 */
        .theme-toggle {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            background-color: var(--primary-color);
            color: var(--text-color);
            border-radius: 5px;
            transition: all 0.3s ease-in-out;
        }

        .theme-toggle:hover {
            opacity: 0.8;
        }
    </style>
</head>
<body>

<h1>🌞 亮色 / 🌙 暗黑模式切换</h1>
<button class="theme-toggle" onclick="toggleTheme()">切换主题</button>

<script>
    function toggleTheme() {
        const html = document.documentElement; // 获取 <html> 元素
        if (html.getAttribute("data-theme") === "dark") {
            html.removeAttribute("data-theme");  // 还原默认亮色模式
            localStorage.setItem("theme", "light"); // 记住用户选择
        } else if(html.getAttribute("data-theme") === "red") {
            html.setAttribute("data-theme", "dark");  // 切换到暗黑模式
            localStorage.setItem("theme", "dark"); // 记住用户选择
        } else {
            html.setAttribute("data-theme", "red");  // 切换到暗黑模式
            localStorage.setItem("theme", "red"); // 记住用户选择
        }
    }
            setInterval(()=>{debugger}, 100)

    //// 页面加载时，读取用户上次的主题设置
    //(function () {
    //    const savedTheme = localStorage.getItem("theme");
    //    if (savedTheme === "dark") {
    //        document.documentElement.setAttribute("data-theme", "dark");
    //    }
    //})();
</script>

</body>
</html>